<template>
    <div class="category">
        <!-- <h2>分类</h2>
      <h5>目前共计48个标签</h5> -->
        <el-row :gutter="20">
            <el-col :span="3" class="col-left">
                    <nuxt-link 
                        :to="{ path: '/category' }" 
                        class="cate-link" 
                        active-class="current" 
                        exact  
                        @click.native="change(0)"
                    ><span>全部</span></nuxt-link>
                    <nuxt-link 
                        v-for="(item, index) in category" 
                        :key="index" 
                        class="cate-link" 
                        active-class="current" 
                        exact 
                        :to="{ path: '/category', query: { c: item.id } }"
                        @click.native="change(item.id)"
                    >
                        <span>{{item.name}}</span>
                    </nuxt-link>
            </el-col>
            <el-col :span="21" class="col-right">
                <ArticleScrollPage v-bind="params"></ArticleScrollPage>
            </el-col>
        </el-row>
    </div>
</template>
<script>
import ArticleScrollPage from '@/components/ArticleScrollPage'

export default {
    name: 'CateDom',
    components: {
        ArticleScrollPage
    },
    props: {
        id: {
            type:Number, 
            default: 0 
        }
    },
    data() {
        return {
            category: [],
            params: {
                query: {
                    cate_id: 0
                }
            },
        }
    },
    // validate({ params }) {
    //     console.log(params)
    //     // 必须是number类型
    //     return /^\d+$/.test(params.c)
    // },
    mounted() {
        this.params.query.cate_id = this.$route.query.c ? this.$route.query.c : 0;
        this.getCategory();

    },
    methods: {
        getCategory() {
            this.$Api.getCates().then(res => {
                this.category = res.data
            })
        },
        change(id) {
            this.params.query.cate_id = id;
        },

    }
}
</script>
<style lang="less" scoped>
.category {
    text-align: center;

    h2 {
        line-height: 100px;
        color: #555;
        font-weight: 500;
    }

    h5 {
        font-weight: 500;
        color: #555;
    }

    .el-row {
        width: 100%;

        .col-right {
            margin-left: 20%;
            min-height: 600px;
        }

        .col-left {
            padding: 20px 0;
            margin: 20px 0;
            background-color: #ffffff;
            position: fixed;

            a {
                list-style: none;
                padding: 5px 20px;
                text-align: center;
                cursor: pointer;
                display: block;
                color: #555;
                line-height: 2;
            }
            .cate-link{
                &.current {
                    color: #6bc30d;
                    font-weight: 600;
                    background: linear-gradient(90deg, #2db7f5, #6bc30d);
                    -webkit-background-clip: text;
                    color: transparent;
                }
            }
            
        }
    }

}
</style>